<template>
  <div>
    <div class='my-header'>
      <div class="left">
        <router-link to="/">
          <img src="../assets/logo.png" alt="" />
        </router-link>
      </div>
      <div class="right">
        <template v-if="!$store.state.user.userInfo.nickname">
          <el-button type="primary">
            <router-link to="/login">登录</router-link>
          </el-button>
          <el-button type="success">
            <router-link to="/register">注册</router-link>
          </el-button>
        </template>
        <template v-else>
          <img :src="$store.getters.avatar" alt="">
          <el-dropdown>
            <el-button type="primary" plain>
              你好, {{ $store.getters.nickname }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="$router.push('/add-article')">新建文章</el-dropdown-item>
              <el-dropdown-item @click.native="$router.push(`/columns/${$store.getters.userId}`)">我的专栏
              </el-dropdown-item>
              <el-dropdown-item @click.native="dialogFormVisible = true">编辑资料</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </div>
    </div>
    <el-dialog title="编辑个人资料" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item align="center" porp="avatar">
          <!-- 用来显示封面的图片 -->
          <img :src="form.avatar" alt="" class="cover-img" ref="imgRef" v-if="form.avatar" @click="choiceCover" />
          <img src="@/assets/cover.jpg" alt="" class="cover-img" v-else @click="choiceCover" />
          <br />
          <!-- 文件选择框，默认被隐藏 -->
          <input type="file" style="display: none;" accept="image/*" ref="iptFileRef" @change="onCoverChangeFn" />
          <!-- 选择封面的按钮 -->
          <el-button type="text" @click="choiceCover">+ 选择用户头像</el-button>
        </el-form-item>
        <el-form-item align="center" prop="nickname">
          <span style="font-size: 14px;color: #606266;line-height: 40px;">用户昵称:</span><br>
          <el-input v-model="form.nickname" autocomplete="off" style="width: 60%" placeholder="请输入用户昵称"></el-input>
        </el-form-item>
        <el-form-item align="center" prop="description">
          <span style="font-size: 14px;color: #606266;line-height: 40px;">用户介绍:</span><br>
          <el-input type="textarea" v-model="form.description" autocomplete="off" style="width: 60%"
            placeholder="请输入用户介绍"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="conformFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { updateUserInfo } from '@/api/user'

export default {
  name: 'MyHeader',
  data () {
    return {
      dialogFormVisible: false,
      form: {
        id: this.$store.getters.userId,
        nickname: this.$store.getters.nickname,
        description: this.$store.getters.description,
        avatar: this.$store.getters.avatar
      },
      rules: {
        avatar: [
          { required: true, message: '请选择用户头像', trigger: ['blur', 'change'] }
        ],
        nickname: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入用户介绍', trigger: 'blur' }
        ]
      }
    }
  },
  components: {},
  methods: {
    logout () {
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('user/logoutActions')
        this.$message.success('退出成功!')
        this.$router.replace(`/login?redirect=${encodeURIComponent(this.$route.fullPath)}`)
      }).catch(() => {
        this.$message.info('已取消退出!')
      })
    },
    choiceCover () {
      this.$refs.iptFileRef.click()
    },
    // 封面选择改变的事件
    onCoverChangeFn (e) {
      // 获取用户选择的文件列表
      const files = e.target.files
      if (files.length === 0) {
        // 用户没有选择封面
        this.form.avatar = null
      } else {
        const fr = new FileReader()
        fr.readAsDataURL(files[0])
        fr.onload = (e) => {
          this.form.avatar = e.target.result
        }
      }
    },

    conformFn () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await updateUserInfo(this.form)
          if (res.code === 0) {
            this.$message.success(res.msg)
            this.dialogFormVisible = false
            // 更新用户信息
            this.$store.dispatch('user/userInfoActions')
          }
        } else {
          return false
        }
      })
    }
  },
  created () { },
  mounted () { }
}
</script>

<style lang='less' scoped>
.my-header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 70px;
  display: flex;
  padding: 0 200px;
  background-color: #fffefe;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgb(245, 242, 242);

  .left {
    height: 70px;
    display: flex;
    align-items: center;

    img {
      width: 200px;
      height: 60px;
    }
  }
}

.right {
  &>img {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    margin-right: 8px;
    vertical-align: middle;
  }

  a {
    color: #fffefe;
  }
}

.el-dropdown-menu {
  width: 150px;
}

.cover-img {
  width: 120px;
  height: 120px;
  border-radius: 100%;
}

:deep(.el-form-item__error) {
  left: 20%;
}
</style>
